<template>
  <div class="user-avator-dropdown">
    <!-- <Dropdown @on-click="handleClick">
      <Avatar :src="userAvator"/>
      <span>{{ username }}</span>
      <Icon :size="18" type="md-arrow-dropdown"></Icon>
      <DropdownMenu slot="list">
        <DropdownItem name="account-center">个人信息</DropdownItem>
        <DropdownItem name="modify-pass">修改密码</DropdownItem>
        <DropdownItem name="logout" divided>退出登录</DropdownItem>
      </DropdownMenu>
    </Dropdown> -->
    <Avatar style="background: #00a2ae;">{{ ['欧阳', '司徒', '宇文'].indexOf(username.substring(0, 2)) > -1 ? username.substring(0, 2) : username.substring(0, 1)}}</Avatar>
    <span class="username">{{ username }}</span>
    <Button type="info" icon="ios-log-out" size="small" ghost @click="logout" class="logout-button">退出</Button>
  </div>
</template>

<script>
import './user.less'
import { mapActions } from 'vuex'
export default {
  name: 'User',
  props: {
    userAvator: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      username: '',
      userCode: ''
    }
  },
  methods: {
    ...mapActions([
      'handleLogOut',
      'getUserInfo'
    ]),
    handleClick (name) {
      switch (name) {
        case 'account-center':
          this.$router.push({
            name: 'account_center'
          })
          break
        case 'modify-pass':
          this.$router.push({
            name: 'modify_pass'
          })
          break
        case 'logout':
          this.handleLogOut().then(() => {
            this.$router.push({
              name: 'login'
            })
          })
          break
      }
    },
    logout () {
      // let http = process.env.NODE_ENV === 'production' ? '' : 'http:'
      window.location.href = 'https://cas.dgut.edu.cn/logout?callback=' + window.location.protocol + '//' + window.location.hostname + '/logout'
      // this.handleLogOut().then(() => {
      //   this.$router.push({
      //     name: 'login'
      //   })
      // })
    }
  },
  created: function () {
    this.$Notice.config({
      top: window.innerHeight / 3
    })
  },
  mounted: function () {
    this.getUserInfo().then(response => {
      let res = response.data
      if (res.code === 1) {
        res = res.data
        this.username = res.name || ''
        this.userCode = res.code || ''
      } else {
        this.$Notice.error({
          title: '获取信息失败',
          desc: '获取用户信息失败！' + res.info
        })
      }
    }).catch(error => {
      console.log(error)
      this.$Notice.error({
        title: '获取信息失败',
        desc: '获取用户信息失败！'
      })
    })
  },
  beforeDestroy () {
    this.$Notice.destroy()
  }
}
</script>
